@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';

$appearances: 'primary', 'neutral', 'red', 'orange', 'yellow', 'green', 'blue', 'violet', 'pink';

.statusCell {
  display: flex;
  gap: $space-table-cell-gap;
  align-items: center;

  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-right: $space-table-cell-padding;

  &[data-no-label] {
    padding-right: 0;
  }
}

.statusCellLabel {
  box-sizing: border-box;
  min-width: 0;
  color: $sys-neutral-text-support;
}

.statusCellIndicator {
  @include composite-var($table-status-indicator);

  position: relative;

  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  width: $size-table-cell-status-indicator-horizontal;

  background-color: inherit;

  &::after {
    @include composite-var($table-status-indicator);

    content: '';

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    box-sizing: border-box;
    width: 100%;
  }

  @each $appearance in $appearances {
    &[data-appearance='#{$appearance}'] {
      &::after {
        background-color: simple-var($theme-variables, 'sys', $appearance, 'accent-default');
      }
    }
  }

  &[data-loading] {
    position: relative;
  
    &::after {
      content: '';
  
      position: absolute;
      left:0;
      
      width: 100%;
      height: auto;
      
      background-color: $sys-neutral-decor-default;
  
      animation: loading ease-in-out 0.8s infinite alternate;
    }
  }
}

@keyframes loading {
  0% {
    top: 0;
    bottom: calc(100% - $dimension-050m);
  }
  50% {
    top: 0;
    bottom: 0;
  }
  100% {
    top: calc(100% - $dimension-050m);
    bottom: 0;
  }
}
